import React, { useState, useEffect } from 'react';
import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardDescription, 
  CardContent,
  Button,
  Divider,
  Image,
  CoffeeIcon,
  GitHubIcon,
  BilibiliIcon
} from '@repo/ui';
import styles from './AboutPage.module.css';

const AboutPage: React.FC = () => {
  const [displayedText, setDisplayedText] = useState('');
  const fullText = '满船星梦压星河，愿与清风共远游';
  
  useEffect(() => {
    const typeText = () => {
      let index = 0;
      // 使用空格占位符保持高度
      setDisplayedText('\u00A0');
      
      const typeTimer = setInterval(() => {
        if (index < fullText.length) {
          setDisplayedText(fullText.slice(0, index + 1));
          index++;
        } else {
          clearInterval(typeTimer);
          // 等待3秒后重新开始
          setTimeout(() => {
            typeText();
          }, 3000);
        }
      }, 100);
    };
    
    typeText();
  }, []);

  const handleContactClick = () => {
    window.open('mailto:contact@243155520@qq.com', '_blank');
  };

  const handleDocumentationClick = () => {
    window.open('https://www.hanlinbo.cn/lingverse/', '_blank');
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1 className={styles.title}>ESP32 Launchpad</h1>
        <p className={styles.subtitle}>
          专业的ESP32设备云管理平台，让设备管理更智能高效
        </p>
      </div>

      <div className={styles.content}>
        <div className={styles.contentGrid}>
          <div className={styles.leftColumn}>
            <Card className={styles.card}>
              <CardHeader>
                <CardTitle>关于作者</CardTitle>
                <CardDescription>
                  项目开发者个人介绍
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className={styles.authorSection}>
                  <div className={styles.authorInfo}>
                    <div className={styles.authorAvatar}>
                      <Image
                        src="https://static.hanxiaoxin.cn/avatar/hanxiaoxin/hanxiaoxin.jpg"
                        alt="韩小信"
                        width={80}
                        height={80}
                        variant="circle"
                        className={styles.authorAvatarImage}
                      />
                    </div>
                    <div className={styles.authorDetails}>
                      <h4 className={styles.authorName}>韩小信</h4>
                      <p className={styles.authorRole}>全栈开发工程师</p>
                      <p className={styles.authorBio}>
                        喜欢在细碎的日子里，收集一些星光与风声；也常常在书页与音符间，寻找生活里的温柔与浪漫。
                        如果说人生是一场旅途，我愿意做个追星的人，把喜欢与热爱都藏进心里，然后把温暖分享给身边的人。
                      </p>
                      <div className={styles.socialLinks}>
                        <a 
                          href="https://github.com/hanxiaoxin" 
                          target="_blank" 
                          rel="noopener noreferrer"
                          className={styles.socialLink}
                          aria-label="GitHub"
                        >
                          <GitHubIcon className={styles.socialIcon} />
                        </a>
                        <a 
                          href="https://space.bilibili.com/1635947791" 
                          target="_blank" 
                          rel="noopener noreferrer"
                          className={styles.socialLink}
                          aria-label="B站"
                        >
                          <BilibiliIcon className={styles.socialIcon} />
                        </a>
                      </div>
                    </div>
                  </div>
                  <div className={styles.authorDescription}>
                    <p className={styles.descriptionText}>
                      {displayedText}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className={styles.card}>
              <CardHeader>
                <CardTitle>技术底座</CardTitle>
                <CardDescription>
                  基于现代Web技术构建
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className={styles.techStack}>
                  <div className={styles.techItem}>
                    <span className={styles.techLabel}>前端框架</span>
                    <span className={styles.techValue}>React + TypeScript + Zustand</span>
                  </div>
                  <div className={styles.techItem}>
                    <span className={styles.techLabel}>后端框架</span>
                    <span className={styles.techValue}>Node.js + Hono + MySQL + Redis</span>
                  </div>
                  <div className={styles.techItem}>
                    <span className={styles.techLabel}>硬件支持</span>
                    <span className={styles.techValue}>ESP-IDF + Arduino + MicroPython</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className={styles.rightColumn}>
            <Card className={styles.card}>
              <CardHeader>
                <CardTitle>联系我们</CardTitle>
                <CardDescription>
                  有任何问题或建议，欢迎与我们联系
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className={styles.contactActions}>
                  <Button
                    variant="default"
                    size="lg"
                    onClick={handleContactClick}
                    className={styles.contactButton}
                  >
                    发送邮件
                  </Button>
                  <Button
                    variant="outline"
                    size="lg"
                    onClick={handleDocumentationClick}
                    className={styles.contactButton}
                  >
                    查看文档
                  </Button>
                </div>
                <Divider className={styles.divider} />
                <div className={styles.qrCodeSection}>
                  <Image
                    src="https://picsum.photos/200/200"
                    alt="联系我们二维码"
                    width={200}
                    height={200}
                    variant="rounded"
                    className={styles.qrCode}
                  />
                </div>
                <Divider className={styles.divider} />
                <div className={styles.footer}>
                  <CoffeeIcon className={styles.coffeeIcon} />
                  <p>用 ❤️ 和 ☕ 制作</p>
                </div>
              </CardContent>
            </Card>

            <Card className={styles.card}>
              <CardHeader>
                <CardTitle>友情链接</CardTitle>
                <CardDescription>
                  合作伙伴与相关资源
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className={styles.friendLinks}>
                  <Image
                    src="https://picsum.photos/32/32?random=1"
                    alt="合作伙伴1"
                    width={32}
                    height={32}
                    variant="circle"
                    className={styles.friendLinkImage}
                  />
                  <Image
                    src="https://picsum.photos/32/32?random=2"
                    alt="合作伙伴2"
                    width={32}
                    height={32}
                    variant="circle"
                    className={styles.friendLinkImage}
                  />
                  <Image
                    src="https://picsum.photos/32/32?random=3"
                    alt="合作伙伴3"
                    width={32}
                    height={32}
                    variant="circle"
                    className={styles.friendLinkImage}
                  />
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AboutPage;
